<template>
  <CustomPageLayout>
    <template #top>
      <LabelSearch label="全国优质项目" :search-str.sync="params.name" />
    </template>

    <template #center>
      <ProjectFilters :checked.sync="params.filters" />
    </template>

    <template #bottomLeft>
      <LabelCountSort :count="total">
        <template #sort>
          <!-- <ListSortGroup :data-list="sortData" :sort.sync="params.sort" /> -->
        </template>

        <template #viewMode>
          <ViewMode @onChange="(mode) => (currentMode = mode)" />
        </template>
      </LabelCountSort>
      <ProjectList :data-list="projectList" :loading="loading" :mode="currentMode" />
    </template>

    <template #pagination>
      <Pagination
        :total="total"
        :page-size="params.pageInfo.pageSize"
        :current-page.sync="params.pageInfo.pageNum"
      />
    </template>
  </CustomPageLayout>
</template>

<script lang="ts">
import Vue from 'vue'
import LabelSearch from '@/components/portal/LabelSearch.vue'
import ProjectFilters from '@/components/portal/project/ProjectFilters.vue'
import ProjectList from '@/components/portal/project/ProjectList.vue'
import LabelCountSort from '@/components/portal/LabelCountSort.vue'
import ListSortGroup from '@/components/portal/ListSortGroup.vue'
import CustomPageLayout from '@/components/portal/CustomPageLayout.vue'
import Pagination from '@/components/portal/Pagination.vue'
import ViewMode from '@/components/portal/ViewMode.vue'
import { ActionsType as TreeActionsType } from '@/actions/tree'
import { ActionsType as DictActionsType } from '@/actions/dict'
import { getProjectPageList } from '@/api/resource'
export default Vue.extend({
  components: {
    ProjectFilters,
    ProjectList,
    LabelCountSort,
    ViewMode,
    ListSortGroup,
    CustomPageLayout,
    Pagination,
    LabelSearch,
  },
  async asyncData({ store }) {
    await store.dispatch(DictActionsType.getCodes, ['project_type', 'project_status'])
    const result = await getProjectPageList({
      pageInfo: {
        pageNum: 1,
        pageSize: 12,
      },
    })

    return {
      projectList: result.list,
      total: result.total,
      loading: false,
    }
  },
  data() {
    return {
      currentMode: 'card',
      loading: true,
      total: 0,
      sortData: [
        {
          label: '楼宇名称',
          sort: -1,
          key: 'name',
        },
        {
          label: '注册企业数',
          sort: -1,
          key: 'counts',
        },
      ],
      params: {
        pageInfo: {
          pageNum: 1,
          pageSize: 12,
        },
        name: '',
        filters: [],
        sort: {},
      },
      projectList: [],
    }
  },
  head: {
    title: '找项目',
  },
  watch: {
    'params.name'() {
      this.fetchData()
    },
    'params.filters'() {
      this.fetchData()
    },
    'params.sort'() {
      this.fetchData()
    },
    'params.pageInfo.pageNum'() {
      this.fetchData()
    },
  },
  created() {
    console.log('created')

    this.$store.dispatch(TreeActionsType.getArea)
    this.$store.dispatch(TreeActionsType.getIndustryTag)
  },
  methods: {
    async fetchData() {
      const {
        pageInfo: { pageNum },
        filters,
        name,
        sort,
      } = this.params

      const params = {
        conditions: {},
        sort: {},
        pageInfo: {
          pageNum,
          pageSize: 12,
        },
      }

      filters.forEach((d) => {
        params.conditions[`data.${d.key}`] = d.checked[0].value
      })

      if (name) {
        params.conditions[`data.name`] = { $regex: name }
      }

      if (sort) {
        params.sort[`data.${sort.key}`] = sort.sort
      }

      this.loading = true
      const result = await getProjectPageList(params)
      this.projectList = result.list
      this.total = result.total
      this.loading = false
    },
  },
})
</script>
<style lang="scss" scoped></style>
